<template>
    <div class="fushi-level-body">
        <div class="fushi-list">
            <div v-for="(fushi, index) in fushiList" @click="selectTheFushi(index)"
            :class="{ 'fushi-item': true, 'back-red': fushi.color == '红色',
             'back-yellow': fushi.color == '黄色', 'selected': index == selectedIndex
             }">
                <img :src="fushi.image" class="fushi-image">
                <div class="fushi-name">{{ fushi.name }}</div>
            </div>
        </div>
        <div class="selectedFushi">
            <div :class="{ 'selected-fushi-show': true, 'back-red': selectedFushi.color == '红色',
             'back-yellow': selectedFushi.color == '黄色' }">
                <div class="fushi-name">{{ selectedFushi.name }}</div>
                <img :src="selectedFushi.image" class="selected-fushi-image">
                <div class="fushi-title-detail">
                    <div>1、可在长安城(499，141)宝石商人处购买，最低价格80000银两，价格随购买人数而增加，每10分钟刷新一次，每次下降幅度为10000银两</div>
                    <div>2、部分任务(如师门任务)、活动中获得</div>
                    <div>3、向其他玩家购买</div>
                    <div>使用：右键点击1级的未激活符石，消耗5万经验和5点体力激活后，可镶嵌在已开运装备上</div>
                    <div>说明：</div>
                    <div>1、在宝石商人处购买的符石颜色随机，均为未激活符石</div>
                    <div>2、未激活和激活状态均允许交易、给予、摆摊出售等</div>
                    </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue'
import Fushi from '../../../../images/fushi.png'

const fushiList = [
    {
        name: '冰符石',
        attr: '体质+1',
        color: '红色',
        image: Fushi,
        price: '120000'
    },{
        name: '土符石',
        attr: '耐力+1',
        color: '红色',
        image: Fushi,
        price: '120000'
    },{
        name: '雷符石',
        attr: '敏捷+1',
        color: '红色',
        image: Fushi,
        price: '120000'
    },{
        name: '电符石',
        attr: '法术防御+1',
        color: '红色',
        image: Fushi,
        price: '120000'
    },{
        name: '风符石',
        attr: '魔力+1',
        color: '黄色',
        image: Fushi,
        price: '120000'
    },{
        name: '炎符石',
        attr: '力量+1',
        color: '黄色',
        image: Fushi,
        price: '120000'
    },{
        name: '火符石',
        attr: '法术伤害+1',
        color: '黄色',
        image: Fushi,
        price: '120000'
    }
]
let selectedIndex = ref(0)
let selectedFushi = ref(fushiList[selectedIndex.value])
const selectTheFushi = (index) => {
    selectedIndex.value = index
    selectedFushi.value = fushiList[index]
}
</script>

<style scoped>
.fushi-level-body {
    width: 608px;
    height: 528px;
}
.fushi-list {
    width: 348px;
    height: 528px;
    float: left;
}
.selectedFushi {
    width: 236px;
    height: 528px;
    margin-left: 12px;
    overflow: hidden    ;
    float: left;
}
.fushi-title-detail {
    padding: 0 12px;
    line-height: 18px;
}
.selected-fushi-show {
    width: 236px;
    height: 528px;
    box-shadow: 0 0 5px #999999;
    transition: all 0.2s;
    cursor: pointer;
    border-radius: 4px;
    margin-bottom: 12px;
}
.selected-fushi-show:hover {
    box-shadow: 0 0 20px #000000;
    transform: scale(1.02);
}
.fushi-item {
    width: 100px;
    height: 140px;
    box-shadow: 0 0 5px #999999;
    margin-left: 12px;
    margin-bottom: 12px;
    border-radius: 4px;
    float: left;
    transition: all 0.2s;
    cursor: pointer;
}
.fushi-item:hover {
    box-shadow: 0 0 20px #000000;
    transform: scale(1.05);
}
.fushi-item:hover .fushi-image {
    transform: scale(1.15);
}
.fushi-image {
    width: 90px;
    height: 90px;
    border-radius: 4px;
    transition: all 0.2s;
    margin: 5px;
}
.fushi-name {
    line-height: 40px;
    text-align: center;
    font-size: 16px;
}
.back-red {
    background: rgb(255, 61, 61);
    color: #fff;
}
.back-yellow {
    background: rgb(255, 255, 61);
    color: #333;
}
.selected {
    box-shadow: 0 0 20px #000000;
    transform: scale(1.05);
}
.selected-fushi-image {
    width: 212px;
    height: 212px;
    margin: 0 12px;
    border-radius: 4px;
    transition: all 0.2s;
}
.selected-fushi-image:hover {
    width: 236px;
    height: 236px;
    border-radius: 12px;
    margin: 0;
    margin-top: -12px;
}
</style>